<template>
    <div>
        <div>
            <div style="float: left;width: 50%;margin-left: 5%;">
                <div>
<!--                    <div style="text-align: center;align-items:center;font-size: 18.7px;">-->
<!--&lt;!&ndash;                            <p style="text-align: center;font-size: 18.7px;margin-top: 15px">评审组名称</p>&ndash;&gt;-->
<!--                    </div>-->
<!--                    <a-input placeholder=items v-model="items.title" style="font-family: 新宋体;font-size:30px;align-items: center;height: 120px;text-align: center;color: red"/>-->
                   <p style="margin-top:20px;font-family: 新宋体;font-size:30px;align-items: center;height: 120px;text-align: center;color: #4e69ea"> {{items.title}}<p/>
                </div>
                <div style="text-align: center;align-items:center;font-size: 18.7px;">
                    <p style="margin-top:5px;font-family: 新宋体;font-size:30px;align-items: center;height: 120px;text-align: center;color: #4880f1"> {{items.content}}<p/>
<!--                    <a-textarea placeholder="Basic usage" v-model="items.content" :rows="4" style="font-family: 新宋体;font-size:20px;color: #1890ff;height: 200px;"/>-->
                </div>
            </div>

            <div  style="margin-left:60%;margin-right: 11.5%;">
                <div :style="{ width: '100%', border: '1px solid #d9d9d9', borderRadius: '4px', }">
                    <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
                </div>
            </div>

        </div>

        <div style="margin-left: 5%">
            <a-transfer
                    :data-source="mockData"
                    show-search
                    :list-style="{
                            width: '40%',
                            height: '400px',
                        }"
                    :operations="['移入评审组', '移出评审组']"
                    :target-keys="targetKeys"
                    :render="item => `姓名：${item.name}-----职称：${item.title}`"
                    @change="handleChange"
            >
                <!--                <a-button-->
                <!--                        slot="footer"-->
                <!--                        size="small"-->
                <!--                        style="float:right;margin: 5px"-->
                <!--                        @click="getMock()"-->
                <!--                >-->
                <!--                    reload-->
                <!--                </a-button>-->
                <span slot="notFoundContent">
                    没数据
                </span>
            </a-transfer>
        </div>
<!--        key:${item.key}&#45;&#45;-->
    </div>
</template>
<script>
    // import Axios from "axios"
    import Axios from "axios";

    export default {
        data() {
            return {
                url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
                mockData: this.$route.params.mockData,//数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外。
                targetKeys: this.$route.params.targetKeys,//显示在右侧框数据的 key 集合
                items: this.$route.params.item,
            };
        },
        computed: {
            // items() {
            //     return this.$route.params.item;
            // },
        },
        mounted() {
            Axios.post(this.url+"/pxManagerSystem/getAllSpecialistIdByReviewId",{
                review_id:this.items.id
            }).then(
                (res)=>{
                    const SPdata = res.data.data.specialistIdlist;
                   // console.log(SPdata)
                    this.targetKeys = SPdata;
                }
            )
        },
        methods: {
            handleChange(targetKeys, direction, moveKeys) {
                // console.log(this.items.id)//评审组ID
                // console.log(this.mockData[0])
                if (direction=="left"){
                    moveKeys.forEach(
                        data => {
                            console.log(data)
                            console.log("评审组ID："+this.items.id)
                            Axios.delete(this.url + "/pxManagerSystem/deleteSpecialistReviewRelBySpecialistIdAndReviewId", {
                                data:{
                                    specialist_id:data,
                                    review_id:this.items.id
                                }
                            }).then()
                        }
                    )
                }else{
                    moveKeys.forEach(
                        data => {
                            //console.log(data)
                            console.log("评审组ID："+this.items.id)
                            Axios.post(this.url + "/pxManagerSystem/insertSpecialistReviewRel", {
                                specialist_id:data,
                                review_id:this.items.id
                            }).then()
                        }
                    )
                }
               // console.log(targetKeys)
                this.targetKeys = targetKeys;
            },
        }
    };
</script>
